<template>
	<div class="user-center">
		<div class="content">
			<div class="avatar">
				<Avatar src="http://lang.sliver.fun/2020-3-11_222724379.jpg" size="100" />
			</div>
			<h1 class="user-title">
				<a href="#">怡人Y&R</a>
			</h1>
			<p class="remark">人生当苦无妨  良人当归即好</p>
			<div class="type" >
				<a class="logo logo-qq"  href="http://wpa.qq.com/msgrd?v=3&uin=1102076808&site=qq&menu=yes" target="_blank"></a>
				<Poptip trigger="hover" placement="top"  >
					<div class="logo logo-wechat" ></div>
					<div slot="content">
						<img src="http://lang.sliver.fun/2020-3-11_22435296.jpg" width="100px"/>
					</div>
				</Poptip>
				<a class="logo logo-weibo" href="https://www.weibo.com/5555892363" target="_blank"></a>
				<a class="logo logo-github" href="https://github.com/Lang-Zh?tab=repositories" target="_blank"></a>
			</div>
			<div class="list">
				<YRList :list="list"></YRList> 
			</div>
		</div>
	</div>
</template>

<script>
import YRList from '@/components/common/YRList.vue';
export default {
  name: 'UserCenter',
  components: {
    YRList
  },
  props: {
  },
  data:()=>{
	return{
		list:[
			{
				name:'技术博客',
				url:'/article/articleList'
			},
			{
				name:'笑忘书集',
				url:'/novel/novelList'
			},
			{
				name:'温其如玉',
				url:'/poetry/poetryList'
			}
		]
	}  
  }
}
</script>

<style lang="stylus" scoped>
.ivu-poptip-popper,.ivu-poptip-body-content
	min-width none!important
.user-center
	height 100%
	.content:hover .user-title::after
		transform: scaleX(0);
	.content:hover .avatar
		opacity 1
	.content
		min-height: 50px
		width 100%
		background: #fff
		border-radius: 10px
		position: relative
		z-index: 88
		text-align center
		padding-top 10px 
		box-shadow: 0 0 0 1px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
		overflow: auto
		.avatar
			height 110px
			display flex
			justify-content center
			align-items center
			opacity 0.8
			.ivu-avatar
				transition: all .2s ease-in
			.ivu-avatar:hover
				box-shadow: 0 0 0 2px rgba(0,0,0,.02), 0 4px 10px rgba(0,0,0,.06)
		.user-title
			font-size 20px
			margin 0 10%
			position: relative
			text-align center
			a
				color: rgba(0,0,0,.8);
				font-weight 400
		.user-title::after
			content: '';
			position: absolute;
			bottom: -5px;
			left: 0;
			transform: scaleX(1);
			height: 1px;
			width: 100%;
			background: rgba(0,0,0,.4);
			-moz-transition: all .2s ease-in;
			-webkit-transition: all .2s ease-in;
			-o-transition: all .2s ease-in;
			-ms-transition: all .2s ease-in;
			transition: all .2s ease-in;
		.remark
			padding-top 10px	
		.type
			height 50px
			padding 10px
			display flex
			justify-content space-around
			.logo
				height 25px
				width 25px
				cursor pointer
				background-repeat no-repeat
				background-size cover
				background-size: 100% 100%;
				opacity 0.4
			.logo-qq
				background-image url(../../common/img/user_center/qq.png)
			.logo-wechat
				background-image url(../../common/img/user_center/wechat.png)
			.logo-weibo
				background-image url(../../common/img/user_center/weibo.png)
			.logo-github
				background-image url(../../common/img/user_center/github.png)
			.logo-qq:hover
				background-image url(../../common/img/user_center/qq_cur.png)!important
			.logo-wechat:hover
				background-image url(../../common/img/user_center/wechat_cur.png)!important
			.logo-weibo:hover
				background-image url(../../common/img/user_center/weibo_cur.png)!important
			.logo-github:hover
				opacity 1
</style>
